<template>
	<view class="content">
		<Header>
			我的评论
		</Header>
		<uni-list>
			<uni-list-item direction="row" v-for="(item, index) in data" :key="item.id">
				<template v-slot:body>
					<view class="uni-list-box uni-content">
						<view class="user-info">
							<image :src="item.user_avatar_text || emptyAvatar" mode="aspectFill" class="photo"></image>
							<view class="info">
								<view class="name">
									{{item.user_name_text}}
								</view>
								<view class="date">
									{{item.createtime_text}}
								</view>
							</view>
						</view>
						<view class="comment">
							<view class="text">
								{{item.content}}
							</view>
							<span @click="deleteCommon(item, index)">删除</span>
						</view>
						<view class="from">
							{{item.name}}
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-load-more v-if="showLoad" :status="loadStatus" />
		<image src="https://zhzx.on-line-demo.com/image/zwsj.png" mode="aspectFit" class="no-data"
			v-if="loadStatus == 'no-more' && data.length == 0"></image>
	</view>
</template>

<script>
	import Header from '../../components/header.vue'
	import request from '../../common/request.js'
	export default {
		components: {
			Header,
		},
		data() {
			return {
				"emptyAvatar": "",
				data: [],
				page: 1,
				loadStatus: 'loading',
				showLoad: false,
			}
		},
		mounted() {
			this.getListData()
		},
		onReachBottom() {
			if (this.loadStatus != 'loading') {
				this.loadStatus = 'loading'
				this.showLoad = true
				this.page++
				this.getListData()
			}
		},
		methods: {
			deleteCommon(data, index) {
				if (data.course_id) {
					this.deleteStudy(data.id, index)
				} else if (data.fcstudy_id) {
					this.deleteMember(data.id, index)
				}
			},
			deleteStudy(id, index) {
				if(!id) return
				request({
					url: '/study/delComment',
					data: {
						comment_id: id
					},
					method: 'POST',
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
					if (res.code == 1) {
						this.data.splice(index, 1)
						// this.getListData()
					}
				})
			},
			deleteMember(id, index) {
				if(!id) return
				request({
					url: '/member/delComment',
					data: {
						comment_id: id
					},
					method: 'POST',
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
					if (res.code == 1) {
						this.data.splice(index, 1)
						// this.getListData()
					}
				})
			},
			getListData() {
				request({
					url: '/user/mycomment',
					data: {
						page: this.page
					},
					method: 'POST',
				}).then(res => {
					if (res.code == 1) {
						this.data = this.data.concat(res.data)
						if (this.page == res.lastPage) {
							this.loadStatus = 'no-more'
						} else {
							this.loadStatus = 'more'
							this.showLoad = false
						}
					} else {
						this.loadStatus = 'no-more'
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list--border-top,
	::v-deep .uni-list--border-bottom,
	::v-deep .uni-list--border {
		display: none;
	}

	.uni-content {
		width: 100%;
		line-height: 26px;
	}

	.user-info {
		display: flex;
		align-items: center;
		line-height: 20px;
		margin-top: 10px;

		.photo {
			width: 46px;
			height: 46px;
			overflow: hidden;
			border-radius: 50%;
			margin-right: 10px;
		}
	}

	.comment {
		margin: 10px 0px 10px;
		display: flex;
		justify-content: space-between;

		span,label {
			display: inline-block;
			height: 24px;
			line-height: 24px;
			width: 50px;
			text-align: center;
			background-color: #ea5c55;
			color: #fff;
			font-size: 12px;
			border-radius: 15px;
		}

		.text {
			width: calc(100% - 100px)
		}
	}

	.from {
		background-color: #f9f9f9;
		border: 1px solid #808080;
		padding: 10px 10px;
		border-radius: 5px;
	}
</style>